<template>
  <div >
    <dv-full-screen-container style="background:rgb(2,19,49); background-size:100% 100%;" >
     <BorderBox11 title="数据中心" >
      <div class="full_wrap">
          <div class="frame item1">
            <BorderBox1>BorderBox1</BorderBox1>
          </div>
          <div class="frame item2">
            <BorderBox2>BorderBox2</BorderBox2>
          </div>
          <div class="frame item3">
            <BorderBox3>BorderBox3</BorderBox3>
          </div>
          <div class="frame item4">
              <BorderBox4>BorderBox4</BorderBox4>
          </div>
            <div class="frame item5">
              <BorderBox4>BorderBox5</BorderBox4>
          </div>
          <div class="frame item6">
             <BorderBox5>BorderBox6</BorderBox5>
          </div>
          <div class="frame item7">
             <BorderBox6>BorderBox7</BorderBox6>
          </div>
          <div class="frame item8">
              <BorderBox7>
                 <leida-com></leida-com>
              </BorderBox7>
          </div>
          <div class="frame item9">
              <BorderBox8>BorderBox9</BorderBox8>
          </div>
           
        </div>
     </BorderBox11>
    </dv-full-screen-container>
  </div>
</template>

<script setup>
    import { BorderBox2,BorderBox3,BorderBox4,BorderBox5,BorderBox6,BorderBox7,BorderBox8,BorderBox9,BorderBox1,BorderBox11 } from '@kjgl77/datav-vue3'
    import leidaCom from '../charts/leida.vue'
</script>
<style lang="scss">
    .full_wrap{
      padding: 60px;
      box-sizing: border-box;
      display: grid;
      // height:90vw;
      // 指定网格容器的行大小和数量。
          grid-template-rows: 1fr 1fr 1fr 1fr;
          grid-template-columns: 1fr 1fr 1fr 1fr;
   
      // grid-template-areas：通过指定网格区域的名称来创建自定义的网格布局。
      // grid-auto-rows：指定自动跟随的网格行的大小。
      // grid-auto-columns：指定自动跟随的网格列的大小。
      // grid-auto-flow：指定自动布局网格项的方式（行优先或列优先）
      // 指定网格行和列之间的间距
      grid-gap:5px;
      // justify-items：控制网格项在水平方向上的对齐方式。
      // align-items：控制网格项在垂直方向上的对齐方式。
      // justify-content：控制网格容器内所有网格项在水平方向上的对齐方式。
      // align-content：控制网格容器内所有网格项在垂直方向上的对齐方式。
      // grid-row：指定网格项所占的行范围。
      // grid-column：指定网格项所占的列范围。
      // grid-area：指定网格项所占的自定义区域。

    }
    .frame{
      text-align:center;
      color:white;
      line-height:80px;
      font-size: 2em;
      // text-align: center;
      // padding: 20px;
    }
    .item2{
       grid-column:2 / 4;
       grid-row:1 /3;
      
    }
    .item5{
        grid-column:4/ 4;
        grid-row:2 / 3;
    }
    .item6{
       grid-column:1/ 3;
    }
</style>
